import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Migration/from v8/Component Mapping" />

# Component Migration

Here is the mapping of v8 components to their v9 component replacement or equivalent.

- Blank cells mean that there is not a v9 component (yet) or the component did not exist in v8.
- A tilde (~) means the v9 component is currently being developed. It may be in preview or not exported from react-components yet.

Check out the latest schedule information on the [v9 Component Roadmap](https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-v9-Component-Roadmap)

| v8 component           | v9 component                              |
| ---------------------- | ----------------------------------------- |
|                        | Accordion                                 |
|                        | Badge                                     |
|                        | CounterBadge                              |
|                        | PresenceBadge                             |
| ActionButton           | Button                                    |
| ActivityItem           |                                           |
| BasicList              |                                           |
| Breadcrumb             |                                           |
| CommandBarButton       |                                           |
| CommandButton          | MenuButton                                |
| CompoundButton         | CompoundButton                            |
| Calendar               |                                           |
| Callout                | Popover                                   |
| Checkbox               | Checkbox                                  |
| ChoiceGroup            |                                           |
| Coachmark              |                                           |
| ColorPicker            |                                           |
| ComboBox               | ~Dropdown                                 |
| ContextualMenu         | Menu with Button as the MenuTrigger       |
| DefaultButton          | Button                                    |
| DefaultButton (anchor) | Button                                    |
| DefaultButton (menu)   | MenuButton                                |
| DatePicker             |                                           |
| DetailsList            |                                           |
| Dialog                 |                                           |
| DocumentCard           | ~Card                                     |
| Dropdown               | ~Dropdown                                 |
| Facepile               | ~AvatarGroup                              |
| GroupedList            |                                           |
| Icon                   | (icons in react-icons)                    |
| IconButton             | Button                                    |
| Image                  | Image                                     |
| Label                  | Label                                     |
| Layer                  | Portal                                    |
| Link                   | Link                                      |
| MessageBar             |                                           |
| Modal                  |                                           |
| Nav                    |                                           |
| OverflowSet            | priority-overflow                         |
| Overlay                | Portal                                    |
| Panel                  |                                           |
| PrimaryButton          | Button                                    |
| PeoplePicker           |                                           |
| Persona                | Avatar                                    |
| Pickers                |                                           |
| Pivot, PivotItem       | TabList, Tab                              |
| ProgressIndicator      |                                           |
| Rating                 |                                           |
| ResizeGroup            |                                           |
| ScrollablePane         |                                           |
| SearchBox              |                                           |
| Separator              | Divider                                   |
| Shimmer                |                                           |
| Slider                 | Slider                                    |
| SplitButton            | Menu with SplitButton as the Menu Trigger |
| SpinButton             | ~SpinButton                               |
| Spinner                | Spinner                                   |
| Stack                  | (removed)                                 |
| SwatchColorPicker      |                                           |
| TagPicker              |                                           |
| TeachingBubble         |                                           |
| Text                   | Text                                      |
| TextField              | Input                                     |
| ThemeProvider          | FluentProvider                            |
| ToggleButton           | ToggleButton                              |
